<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Busy - 电商</title>
<style>
body,ul{margin: 0; padding: 0;}
li{list-style: none;}

.banner{
    width: 800px;
    height: 450px;
    margin: 100px auto;
    position: relative;
    overflow:hidden;
}
.banner_imgs{
    width: 4000px;
    position: absolute;
    left: 0; top: 0;

}
.banner_imgs li{
    float: left;
}
.banner_imgs img{
    width: 800px;
    height: 100%;
    display: block;
}
.number{
    width: 100%;
    text-align:center;
    position: absolute;
    left: 0;
    bottom: 20px;
}
.number a{
    display: inline-block;
    width: 20px;
    background-color: #fff;
    height: 6px;
    overflow: hidden;
}
.number a.active{
    background:#F60;
}
</style>
<script type="text/javascript">
window.onload=function(){
    var oBanImg=document.getElementById('banner_imgs');
    var oNumber = document.getElementsByClassName('number')[0];
    var aA = oNumber.getElementsByTagName('a');

    for(var i=0;i<aA.length;i++){
        aA[i].id=i;
        aA[i].onmouseover=function(){
            for(var j=0;j<aA.length;j++){
                aA[j].className="";
            }
            aA[this.id].className="active";
            oBanImg.style.left=-this.id*800+"px";
        }
    }
}
</script>
</head>

<body>
<div class="banner">
    <ul class="banner_imgs" id="banner_imgs">
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad2498000174af13660768.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad25df0001300613660768.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26010001ac1113660768.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26170001a86013660768.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26320001289e13660768.jpg" alt=""></a></li>
    </ul>
    <div class="number">
        <a class="active" href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>
</body>
</html>
